<template>
  	<div ref="singer" class="singer">
	  	<listview ref="list" :data="singers" @select="selectSinger"></listview>
	  	<router-view></router-view>
  	</div>
</template>

<script>
	import Listview from '@/base/listview/listview'
	import { mapMutations } from 'vuex'
	import { playlistMixin } from '@/common/js/mixin'
	import { getSingerList } from '@/service/singer'

	export default {
		name: 'Singer',
		data() {
			return {
				singers: []
			}
		},
		mixins: [playlistMixin],
		async created() {
			const result = await getSingerList();
			this.singers = result.singers;
		},
		components: {
			Listview
		},
		methods: {
			handlePlaylist(playlist) {
				const bottom = playlist.length ? '60px' : '';
				this.$refs.singer.style.bottom = bottom;
				this.$refs.list.refresh();
			},
			selectSinger(singer) {
				this.$router.push(`/singer/${singer.mid}`);
				this.setSinger(singer);
			},
			...mapMutations({
				setSinger: 'SET_SINGER'
			})
		}
	}
</script>

<style lang="stylus" scoped>
	.singer
		position: fixed
		top: 88px
		bottom: 0
		width: 100%
</style>
